<!--<template>
  <div>
    巡检信息
  </div>
</template>

<script>
  export default {
    name: "bridgeBasic"
  }
</script>

<style scoped>

</style>-->
<template>
  <div class="bridge">
    <div class="flexBetween">
      <div class="flex">
        <!-- <el-input placeholder="请输入" v-model="name" size="small"></el-input> -->
        <!-- <el-button type="primary" size="small" class="paddingLeft">查询</el-button> -->
      </div>
      <div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addComponent">新增</el-button>
        <el-button type="primary"  size="small" icon="el-icon-plus" @click="moreAdd = true">批量新增</el-button>
        <el-button type="success" size="small" icon="el-icon-back">导出二维码</el-button>
      </div>
    </div>
    <el-table :data="tableData"  :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"   max-height="500" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
      <el-table-column label="构建编号" prop="code" show-overflow-tooltip></el-table-column>
      <el-table-column label="跨" prop="stride" show-overflow-tooltip></el-table-column>
      <el-table-column label="二维码" prop="qrcode" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px;margin-top:10px;"
            :src="download + scope.row.qrcode"
            :preview-src-list="[download + scope.row.qrcode]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip content="修改">
            <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除">
            <el-button type="text" icon="el-icon-delete" style="color:red !important" @click="del(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
           :page-size="pageSize"
        :page-count="pageNum"
        @current-change="changeCurrent">
      </el-pagination>
    </div> -->
    <!-- 新增-->
    <vx-popup
      :title="addTitle"
      width="480px"
      @close="cancelFormSubmit"
      :active.sync="add"
      @confirmPopup="submit"
      @cancelPopup="cancelFormSubmit"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:72%;margin:0 auto">
        <el-form-item label="构件名称:" prop="name">
          <el-input v-model="ruleForm.name"  size="small" placeholder="请输入构件名称"></el-input>
        </el-form-item>
        <el-form-item label="构件编号:" prop="code">
          <el-input v-model="ruleForm.code"  size="small" placeholder="请输入构件编号"></el-input>
        </el-form-item>
        <el-form-item label="跨:" prop="stride">
          <el-input v-model="ruleForm.stride"  size="small" placeholder="请输入跨"></el-input>
        </el-form-item>
        <el-form-item label="数量编号:" prop="numCode">
          <el-input v-model="ruleForm.numCode"  size="small" placeholder="请输入数量编号"></el-input>
        </el-form-item>
        <el-form-item label="二维码:">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :on-remove="removeRender"
            :on-success="handleSuccessRender"
            :file-list="imgList"
            :limit="1"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            v-model="ruleForm.remark"
            maxlength="500"
            show-word-limit
            size="small"
          ></el-input>
        </el-form-item>

      </el-form>
    </vx-popup>
    <!-- 批量新增-->
    <vx-popup
      title="批量新增构件"
      width="480px"
      @close="cancelFormMore"
      :active.sync="moreAdd"
      @confirmPopup="more"
      @cancelPopup="cancelFormMore"
    >
      <el-form :model="moreForm" :rules="moreRules" ref="moreForm" label-width="100px" class="demo-ruleForm" style="width:72%;margin:0 auto">
        <el-form-item label="构件名称:" prop="name">
          <el-input v-model="moreForm.name"  size="small" placeholder="请输入构件名称"></el-input>
        </el-form-item>
        <el-form-item label="构件编号:" prop="code">
          <el-input v-model="moreForm.code"  size="small" placeholder="请输入构件编号"></el-input>
        </el-form-item>
        <el-form-item label="跨:" prop="stride">
          <el-input v-model="moreForm.stride"  size="small" placeholder="请输入跨"></el-input>
        </el-form-item>
        <el-form-item label="跨数:" prop="num">
          <el-input v-model="moreForm.num"  size="small" placeholder="请输入跨数"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            v-model="moreForm.remark"
            maxlength="500"
            show-word-limit
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>
<script>
  import base from "../../../api/base";
  export default {
    name: 'bridgeComponent',
    props: {
      structureId: {
        type: String
      },
      ownId: {
        type: String
      },
      structureModelId:{
        type: String
      }
    },
    data() {
      return {
        upload: base.UPLOADURL,
        download: base.DOWNLOADURL,
        addTitle: '新增构件',
        name: "",
        tableData: [],
        total: 0,
        pageSize: 10,

        imgList: [],
        add:false,
        moreAdd: false,
        ruleForm: {
          name: '',
          code: '',
          remark: '',
          qrCode: '',
          numCode:'',
          stride:''
        },
        rules: {
          name: [
            { required: true, message: '请输入构件名称', trigger: 'blur' }
          ],
          stride: [
            { required: true, message: '请输入跨', trigger: 'blur' }
          ],
          numCode: [
            { required: true, message: '请输入数量编号', trigger: 'blur' }
          ]
        },
        moreForm:{
          name:'',
          code:'',
          remark:'',
          stride:'',
          num:''
        },
        moreRules:{
          name: [
            { required: true, message: '请输入构件名称', trigger: 'blur' }
          ],
          stride: [
            { required: true, message: '请输入跨', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入跨数', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      'structureId': {
        handler(val,old) {
          if(val) {
            this.queryBridgeComponents()
          }
        },
        immediate: true
      }
    },
    methods: {
      queryBridgeComponents() {
        let data = {
          ownId: this.ownId,
          structureId: this.structureId
        }
        this.$api.bridge.queryBridgeComponents(data).then(res => {
          if(res.data.success) {
            this.tableData = res.data.data[0]
          }
        })
      },
      handleSuccessRender(res, file) {
        this.ruleForm.qrCode = res.data.successFiles[0].filePath
      },
      removeRender() {
        this.ruleForm.qrCode = '';
      },
      addComponent() {
        this.addTitle = '新增构件'
        this.add = true
      },
      handelEdit(val) {
        this.addTitle = '修改构件'
        this.add = true
        this.ruleForm = JSON.parse(JSON.stringify(val))
      },
      del(val) {
        this.$confirm("此操作将删除桥梁结构, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api.bridge.deleteBridgeComponent({ id: val.id }).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "删除成功",
                  color: "success",
                  icon: "success"
                });
                this.queryBridgeComponents();
              }
            });
          })
          .catch(() => {});
      },
      reset(){
        this.ruleForm = {
          name: '',
          code: '',
          remark: '',
          qrCode: '' ,
          stride:'',
          numCode:''
        }
      },
      cancelFormSubmit() {
        this.add = false
        this.reset()
      },
      submit() {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            if(this.addTitle === '新增构件'){
              this.$api.bridge.addBridgeComponent({...this.ruleForm,ownId: this.ownId,structureId: this.structureId,structureModelId:this.structureModelId}).then(res => {
                if(res.data.success){
                  this.$vs.notify({
                    text: "新增构件成功",
                    color: "success"
                  })
                  this.add = false
                  this.reset()
                  this.queryBridgeComponents()
                }
              })
            } else{
              let data = {
                id: this.ruleForm.id,
                ownId: this.ownId,
                structureId: this.structureId,
                name: this.ruleForm.name,
                code: this.ruleForm.code,
                qrCode: this.ruleForm.qrCode,
                remark: this.ruleForm.remark
              }
              this.$api.bridge.updateBridgeComponent(data).then(res => {
                if(res.data.success){
                  this.$vs.notify({
                    text: "修改构件成功",
                    color: "success"
                  })
                  this.add = false
                  this.reset()
                  this.queryBridgeComponents()
                }
              })
            }
          }
        })
      },
      resetMore(){
        this.moreForm = {
          name:'',
          code:'',
          remark:'',
          stride:'',
          num:''
        }
      },
      cancelFormMore(){
        this.moreAdd = false
        this.resetMore()
      },
      more(){
        this.$refs['moreForm'].validate(valid => {
          if(valid) {
            this.$api.bridge.addBridgeComponentBatch({...this.moreForm,structureModelId:this.structureModelId,ownId:this.ownId,structureId:this.structureId}).then(res => {
              if(res.data.success) {
                this.$vs.notify({
                  text: "批量新增构件成功",
                  color: "success"
                })
                this.moreAdd = false
                this.resetMore()
                this.queryBridgeComponents()
              }
            })
          }
        })
      },
    }
  };
</script>
<style scoped lang="scss">
  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 44px;
  }
  /deep/.el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 28px;
  }
  /deep/.el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
  }
  .bridge {
    width: 100%;
    .flexBetween{
      display: flex;
      margin-bottom:20px;
      justify-content: space-between;
      .paddingLeft{
        margin-left:20px;
      }
    }
    .table {
      margin-top:20px;
    }
    .page{
      margin-top:20px;
      text-align: center;
    }
  }
</style>
